<template>
  <a-modal
      title="自动学习"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
      :width="720"
      :bodyStyle="{maxHeight: '640px', overflow: 'auto'}"
      @ok="handleOk"
  >
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item>
        <a-input hidden :value="clientHash"></a-input>
      </a-form-item>
      <a-form-item label="模板名称">
        <a-input v-model:value="tempName" style="width: 75%"></a-input>
      </a-form-item>
      <a-form-item label="截止时间">
        <a-date-picker
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            :disabled-date="disableTime"
            v-model:value="time"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue'
import {Modal, Form, Button, Tag, Input, DatePicker, message} from 'ant-design-vue'
import DynamicTable from '@/components/dynamic-table.vue'
import moment from 'moment'
import {newScan} from "@/api/strategy/template"

export default defineComponent({
  name: "auto-study-modal",
  components: {
    [Modal.name]: Modal,
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [DatePicker.name]: DatePicker,
    DynamicTable
  },
  props: {
    remove: { // 移除模态框
      type: Function
    },
    fields: {
      type: Object,
      default: () => ({})
    },
    callback: {
      type: Function,
      default: () => ({})
    },
    clientHash:String
  },
  setup(props) {
    const treeSelectRef = ref<any>(null)

    const tagColors = [ "blue", "cyan", "gold", "lime", "magenta", "orange", "pink", "purple", "red", "yellow", "error", "success", "warning", "processing", "geekblue", "volcano",]

    const state = reactive({
      visible: true,
      time: undefined,
      tempName: '新模板',
      confirmLoading: false,
    })

    const handleOk =async () => {
      if(""==state.tempName){return message.warning('模板名称不能为空！')}
      if(null==state.time){return message.warning('截止时间不能为空！')}

      state.confirmLoading = true
      await newScan({'time':moment(state.time).format("YYYY-MM-DD HH:mm:ss"),'clienthash':props.clientHash,'tempname':state.tempName})
      props.callback()
      state.visible = false
    }

    const disableTime = (current)=>{
      return current < moment().endOf('day')
    }

    return {
      ...toRefs(state),
      treeSelectRef,
      tagColors,
      handleOk,
      disableTime,
      labelCol: {span: 6},
      wrapperCol: {span: 18}
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
